<template>
  <div id="my">
    <van-cell-group class="topuserinfo" v-if="token">
      <van-cell center class="base-info" :border="false">
        <van-image
          class="avatar"
          slot="icon"
          round
          fit="cover"
          :src="user.avatar"
        />
        <div class="nickname" slot="title">{{ user.nickname }}</div>
        <van-button class="setbtn" size="small" to="/userinfo"
          >编辑资料</van-button
        >
      </van-cell>

      <van-grid :border="false" class="data-info">
        <van-grid-item class="data-info-item">
          <div slot="icon">{{ user.artsCount }}</div>
          <div slot="text">头条</div>
        </van-grid-item>
        <van-grid-item class="data-info-item">
          <div slot="icon">{{ user.followsCount }}</div>
          <div slot="text">关注</div>
        </van-grid-item>
        <van-grid-item class="data-info-item">
          <div slot="icon">{{ user.fansCount }}</div>
          <div slot="text">粉丝</div>
        </van-grid-item>
        <van-grid-item class="data-info-item">
          <div slot="icon">{{ user.likeCount }}</div>
          <div slot="text">获赞</div>
        </van-grid-item>
      </van-grid>
    </van-cell-group>

    <div v-else class="unlogged">
      <van-icon
        name="phone-o"
        class="unlogged-iocn"
        @click="
          $router.push({
            name: 'login',
            query: {
              redirect: '/my'
            }
          })
        "
      />
      <p class="unlogged-text">登陆/注册</p>
    </div>
    <van-grid class="nav-grid" :column-num="2" :border="false">
      <van-grid-item class="nav-grid-item" icon="star-o" text="收藏" />
      <van-grid-item
        class="nav-grid-item"
        icon="browsing-history-o"
        text="历史"
      />
    </van-grid>

    <van-cell class="nav-gruop" title="消息通知" is-link to="" />
    <van-cell title="用户反馈" is-link to="" />
    <van-cell title="聊天机器人" is-link to="./webio" />
    <van-cell title="设置" is-link to="" />

    <template v-if="token"
      ><van-cell title="退出登陆" class="quit" @click="quit"
    /></template>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import { getUserInfo } from '@/api/user'
export default {
  name: 'my',
  data () {
    return {
      user: {}
    }
  },
  created () {
    const token = this.token // window.localStorage.getItem('token')
    if (token !== 'null') {
      this.userInfo()
    }
  },
  methods: {
    quit () {
      this.$dialog
        .confirm({
          title: '提示',
          message: '确认退出吗？'
        })
        .then(() => {
          this.$store.commit('setToken', null)
        })
        .catch(() => {})
    },
    // 获取用户信息
    async userInfo () {
      try {
        const { data } = await getUserInfo()
        this.user = data.data
      } catch (error) {}
    }
  },
  components: {},
  props: {},
  watch: {},
  computed: {
    ...mapState({
      token: 'user'
    })
  },
  mounted () {}
}
</script>

<style lang="less" scoped>
#my {
  .topuserinfo {
    background-image: linear-gradient(160deg, #0093e9 0%, #80d0c7 100%);
    .base-info {
      box-sizing: border-box;
      height: 115px;
      padding-top: 38px;
      padding-bottom: 11px;
      background: unset;
      .avatar {
        box-sizing: border-box;
        height: 66px;
        width: 66px;
        border: 2px solid white;
        margin-right: 11px;
      }
      .nickname {
        color: white;
      }
      .setbtn {
        height: 24px;
        color: #666666;
      }
    }
    .data-info {
      height: 65px;
      .data-info-item {
        font-size: 16px;
        color: white;
      }
    }

    /deep/ .van-grid-item__content {
      background: unset;
    }
  }
  .unlogged {
    height: 180px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: #8bc6ec;
    background-image: linear-gradient(135deg, #8bc6ec 0%, #9599e2 100%);

    /deep/ .van-icon-phone-o {
      font-size: 45px;
      color: #50a7ff;
      width: 66px;
      height: 66px;
      border: 1px solid white;
      text-align: center;
      background: white;
      line-height: 66px;
      border-radius: 50%;
      margin-bottom: 5px;
    }
    .unlogged-text {
      font-size: 15px;
    }
  }
  .nav-grid {
    /deep/ .nav-grid-item {
      height: 80px;
      .van-icon-star-o {
        color: red;
      }
      .van-icon-browsing-history-o {
        color: yellowgreen;
      }
    }
  }
  .nav-gruop {
    margin-top: 5px;
  }
  .quit {
    text-align: center;
    margin: 5px 0;
  }
}
</style>
